<%--
  Created by IntelliJ IDEA.
  User: 23333
  Date: 2023/4/8
  Time: 10:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户主页</title>
</head>
<style>
    .cdy {

        float: left;
        border: 1px;
        text-align: center;
        margin-left: 20px;
        margin-top: 20px;
    }

    .cdy img {
        width: 200px;
    }

    .cdy:last-child {
        clear: both;
    }

    .price {
        color: red;
    }

    .loginOut {
        float: right;
    }

    .container {

        width: 500px;

        height: 50px;

        margin: 50px auto;

    }


    .parent {

        width: 100%;

        height: 42px;

        top: 4px;

        position: relative;

    }


    .parent > input:first-of-type {

        /*输入框高度设置为40px, border占据2px，总高度为42px*/

        width: 380px;

        height: 40px;

        border: 1px solid #ccc;

        font-size: 16px;

        outline: none;

    }


    .parent > input:first-of-type:focus {

        border: 1px solid #317ef3;

        padding-left: 10px;

    }


    .parent > input:last-of-type {

        /*button按钮border并不占据外围大小，设置高度42px*/

        width: 100px;

        height: 44px;

        position: absolute;

        background: #317ef3;

        border: 1px solid #317ef3;

        color: #fff;

        font-size: 16px;

        outline: none;

    }
</style>
<body>
<h1>用户主页</h1>
<h2>欢迎您：${sessionScope.user.username}</h2>


<div class="container">
    <form action="/commodity/search" class="parent">
        <input type="text" name="search">
        <input type="submit" value="搜索商品">
    </form>
</div>

<c:forEach var="commodity" items="${sessionScope.commodityList}">
    <div class="cdy">
        <a href="/commodity/query/${commodity.id}">
            <img src="/img/${commodity.img}" alt="">
        </a>
        <a href="/commodity/query/${commodity.id}">
            <p>${commodity.title}</p>
        </a>

        <p class="price">¥${commodity.price}</p>
    </div>
</c:forEach>
<br>
<a class="loginOut" href="/user/loginOut">退出登录</a>
</body>
</html>
